<template>
       <div>
           <!-- 组件传值 父--子、
            v-bind 绑定变量 可以简写为：
             -->
            <Title :title="title"></Title>
            <div style="height: 150px;" ref="box4"></div>
       </div>
   </template>
   <script setup>
   import Title from './Title.vue'
   import {onMounted, ref} from 'vue'
   import { Line } from '@antv/g2plot';
   // 响应式数据
   const title=ref('监测点信息');
   const box4 = ref(null);
   const loadLine=()=>{
       const data = [
     { year: '1991', value: 3 },
     { year: '1992', value: 4 },
     { year: '1993', value: 3.5 },
     { year: '1994', value: 5 },
     { year: '1995', value: 4.9 },
     { year: '1996', value: 6 },
     { year: '1997', value: 7 },
     { year: '1998', value: 9 },
     { year: '1999', value: 13 },
     { year: '1999', value: 8 },
   ];
   const linePlot = new Line(box4.value, {
     data,
     xField: 'year',
     yField: 'value',
     stepType: 'vh',
   });
   
   linePlot.render();
   }
   onMounted(()=>{
       loadLine();
   });
   </script>
   <style scoped lang="less">
   
   </style>
   